<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <script src="${pageContext.request.contextPath}/JavaScript/JQuery.js"></script>
    <meta charset="utf-8">
    <title>登录</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/CSS/styles.css" type="text/css">
</head>
<body>

<div class="container">
    <div class="drop">

        <div class="content">
            <h2>一苇以航</h2>
            <form method="post" action="${pageContext.request.contextPath}/Login" id="loginForm" onsubmit="return checkLogin(event)">
                <div>
                    <input id="UserID" type="text" placeholder="请输入账号" class="inputBox" name="UserID"><br>
                    <span id="UserIDNotNull" style="color: red"></span>
                </div>
                <div>
                    <input id="password" type="password" placeholder="请输入密码" class="inputBox" name="password"><br>
                    <span id="PassIDNotNull" style="color: red"></span>
                </div>
                <div>
                    <button id="loginBtn" class="inputBox">登录</button>
                    <div id="b" style="color: red"></div>
                </div>
            </form>
        </div>

    </div>
</div>
</body>

<script>
	function checkLogin(event) {
		event.preventDefault(); // 防止表单默认提交
		const UserID = document.getElementById("UserID").value;
		const password = document.getElementById("password").value;

		if (UserID === "") {
			$("#UserIDNotNull").html("账号不能为空");
			return false;
		} else {
			$("#UserIDNotNull").html("");
			if (password === "") {
				$("#PassIDNotNull").html("密码不能为空");
				return false;
			} else {
				$("#PassIDNotNull").html("");
				validateUser(UserID, password);
			}
		}
	}

	function validateUser(UserID, password) {
		$("#loginBtn").attr("disabled", true); // 禁用登录按钮防止重复提交
		$.ajax({
			type: "POST",
			url: "CheckLogUser",
			data: { "UserID": UserID, "password": password },
			dataType: "text", // 假设服务器返回纯文本
			success: function (data) {
				if (data === "success") {
					// alert("登录成功");
					$("#loginForm")[0].submit(); // 提交表单
				} else {
					$("#b").html("账号或密码错误");
					$("#loginBtn").removeAttr("disabled"); // 重新启用按钮
				}
			},
			error: function () {
				alert("Error occurred during login.");
				$("#loginBtn").removeAttr("disabled"); // 重新启用按钮
			}
		});
	}
</script>

</html>
